<template>
  <div>
    <div>
      <div class="ok-page-width">
        <div class="line-20"></div>
        <TitleBar title="编辑文章"></TitleBar>
        <div class="line-10"></div>
        <div class="ok-info ok-white" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px">
          <div class="ok-info">
            <div class="ok-box">
              <div class="ok-info20" style="margin-top: 20px">
                <el-form :model="formData" :rules="formDataRules" label-width="100px" class="demo-ruleForm">
                  <div style="width: 800px;">
                    <el-form-item label="文章标题" prop="title">
                      <el-input v-model="formData.title"></el-input>
                    </el-form-item>
                    <el-form-item label="文章副题目">
                      <el-input v-model="formData.subtitle"></el-input>
                    </el-form-item>
                    <el-col :span="12">
                      <el-form-item label="作者" prop="author">
                        <el-input v-model="formData.author"></el-input>
                      </el-form-item>
                    </el-col>
<!--                    <el-col :span="2"></el-col>-->
                    <el-col :span="12">
                      <el-form-item label="关键词" prop="keyword">
                        <el-input v-model="formData.keyword"></el-input>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div style="width: 400px;">
                    <el-form-item label="发布时间" required>
                      <el-date-picker
                          v-model="formData.onlineTime"
                          type="datetime"
                          placeholder="选择日期时间"
                          style="width: 100%;">
                      </el-date-picker>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="图片">
                      <div class="ok-box-left">
                        <el-upload
                            action="#"
                            list-type="picture-card"
                            :auto-upload="false">
                          <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                      </div>
                    </el-form-item>
                  </div>
                  <el-form-item label="内容" required>
                    <Editor v-model="formData.intro"></Editor>
                  </el-form-item>
                </el-form>
                <div class="ok-box-center">
                  <el-button type="primary">保存草稿</el-button>
                  <el-button type="primary">提交上线</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Editor from "@/components/InfoEditor.vue";
import TitleBar from "@/components/TitleBar.vue";

export default {
  components: {TitleBar, Editor},
  data(){
    return{
      formData:{
        title:"",
        subtitle:"",
        sourceName:"",
        author:"",
        newsKeyword:"",
        onlineTime:"",
        level:0,
        thumbnail:"",
        intro:"",

      },
      formDataRules:{
        title:  [
          { required: true, message: '请输文章标题', trigger: 'blur' },
        ],
        author: [
          { required: true, message: '请输入作者名字', trigger: 'blur' },
        ],
        onlineTime: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        level: [
          { required: true, message: '请输入推荐等级', trigger: 'blur' },
        ],
        intro: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
        ]
      }
    }
  },
  methods:{
    showThis(){
      console.log(this.content)
    }
  }
}
</script>